<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
<style>
    .a{
        background-color: lawngreen;
        width: 190px;
        height: 30px;
        color: darkviolet;
    }
    .d{
        position: relative;
        display: inline-block;

    }
    .d1{
        background-color:forestgreen ;
        color:green;
        padding: 16px;
        font-size: 16px;
        border:none;
        cursor: pointer;
        width: 190px;
        color: white;

    }
    .d2{
        display: none;
        position: absolute;
        background-color: white;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .d2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 160px;
    }

    .d2 a:hover {background-color: #f1f1f1}

    .d:hover .d2 {
        display: block;
    }

    .d:hover .d1 {
        background-color: #3e8e41;
    }
</style>
</head>
<body>
<div class="a">
    <span > 首页</span><br>
</div>
<div class="d">
    <button class="d1">一级栏目</button>
    <div class="d2">
        <a href="c.html">二级栏目</a>
        <a href="c.html">二级栏目</a>
    </div>
</div>
<div class="d">
    <button class="d1">一级栏目</button>
    <div class="d2">
        <a href="c.html">二级栏目</a>
        <a href="c.html">二级栏目</a>
    </div>
</div>
<div class="d">
    <button class="d1">一级栏目</button>
    <div class="d2">
        <a href="c.html">二级栏目</a>
        <a href="c.html">二级栏目</a>
    </div>
</div>
</body>
</html>